// 稿定顶部导航
import { UpOutlined, ShopOutlined, ShoppingOutlined, GlobalOutlined } from '@ant-design/icons';
import style from "./enterpriesetop.module.css";

function EnterpriseTop() {
  return (
    <div className={style.box}>
      <div className={style.top}>
        <h1>
          <img src="https://cdn.dancf.com/fe-assets/20231102/logo/logo-text-white.svg" alt="" />
        </h1>
        <ul>
          <li>
            <a href="">产品<i><UpOutlined /></i></a>
            <div className={style.Mask}>
              {/* 滑入显示1 */}
              <div className={style.maskone}>
                <ul>
                  <li>
                    <div style={{ display: 'flex', alignItems: 'center', height: '80px', justifyContent: 'space-around' }}>
                      <div style={{ fontSize: '25px' }}>
                        <img src="" alt="" />
                      </div>
                      <ul>
                        <li><h3>创意供给</h3></li>
                        <li style={{ color: '#999', fontSize: '16px' }}>1.3亿+版权素材，个性化定制满足</li>
                      </ul>
                    </div>
                    <ul style={{ marginLeft: '143px', lineHeight: '30px' }}>
                      <li>花瓣设计大赛
                        <span>
                          <img src="" alt="" />
                        </span>
                      </li>
                      <li>定制设计</li>
                      <li>花瓣版权素材
                        <span>
                          <img src="" alt="" />
                        </span>
                      </li>
                      <li>专业在线设计</li>
                    </ul>
                  </li>
                  <li>
                    <div style={{ display: 'flex', alignItems: 'center', height: '80px', justifyContent: 'space-around' }}>
                      <div style={{ fontSize: '25px' }}>
                        <img src="" alt="" />
                      </div>
                      <ul>
                        <li><h3>资产管理</h3></li>
                        <li style={{ color: '#999', fontSize: '16px' }}>1.3亿+版权素材，个性化定制满足</li>
                      </ul>
                    </div>
                    <ul style={{ marginLeft: '143px', lineHeight: '30px' }}>
                      <li>花瓣设计大赛</li>
                      <li>定制设计</li>
                      <li>花瓣版权素材
                        <span>
                          <img src="" alt="" />
                        </span>
                      </li>
                      <li>专业在线设计</li>
                    </ul>
                  </li>
                  <li>
                    <div style={{ display: 'flex', alignItems: 'center', height: '80px', justifyContent: 'space-around' }}>
                      <div style={{ fontSize: '25px' }}>
                        <img src="" alt="" />
                      </div>
                      <ul>
                        <li><h3>内容生产</h3></li>
                        <li style={{ color: '#999', fontSize: '16px' }}>1.3亿+版权素材，个性化定制满足</li>
                      </ul>
                    </div>
                    <ul style={{ marginLeft: '143px', lineHeight: '30px' }}>
                      <li>花瓣设计大赛
                        <span>
                          <img src="" alt="" />
                        </span>
                      </li>
                      <li>定制设计</li>
                      <li>花瓣版权素材</li>
                      <li>专业在线设计</li>
                    </ul>
                  </li>
                </ul>
                <ul>
                  <li>
                    <div style={{ display: 'flex', alignItems: 'center', height: '80px', justifyContent: 'space-around' }}>
                      <div style={{ fontSize: '25px' }}>
                        <img src="" alt="" />
                      </div>
                      <ul>
                        <li><h3>营销应用</h3></li>
                        <li style={{ color: '#999', fontSize: '16px' }}>1.3亿+版权素材，个性化定制满足</li>
                      </ul>
                    </div>
                    <ul style={{ marginLeft: '143px', lineHeight: '30px' }}>
                      <li>花瓣设计大赛
                        <span>
                          <img src="" alt="" />
                        </span>
                      </li>
                      <li>定制设计</li>
                      <li>花瓣版权素材
                        <span>
                          <img src="" alt="" />
                        </span>
                      </li>
                      <li>专业在线设计</li>
                    </ul>
                  </li>
                  <li>
                    <div style={{ display: 'flex', alignItems: 'center', height: '80px', justifyContent: 'space-around' }}>
                      <div style={{ fontSize: '25px' }}>
                        <img src="" alt="" />                      </div>
                      <ul>
                        <li><h3>效果监测</h3></li>
                        <li style={{ color: '#999', fontSize: '16px' }}>1.3亿+版权素材，个性化定制满足</li>
                      </ul>
                    </div>
                    <ul style={{ marginLeft: '143px', lineHeight: '30px' }}>
                      <li>花瓣设计大赛</li>
                      <li>定制设计</li>
                      <li>花瓣版权素材
                        <span>
                          <img src="" alt="" />
                        </span>
                      </li>
                      <li>专业在线设计</li>
                    </ul>
                  </li>
                  <li>
                    <div style={{ display: 'flex', alignItems: 'center', height: '80px', justifyContent: 'space-around' }}>
                      <div style={{ fontSize: '25px' }}>
                        <img src="" alt="" />
                      </div>
                      <ul>
                        <li><h3>系统定制</h3></li>
                        <li style={{ color: '#999', fontSize: '16px' }}>1.3亿+版权素材，个性化定制满足</li>
                      </ul>
                    </div>
                    <ul style={{ marginLeft: '143px', lineHeight: '30px' }}>
                      <li>花瓣设计大赛
                        <span>
                          <img src="" alt="" />
                        </span>
                      </li>
                      <li>定制设计</li>
                      <li>花瓣版权素材</li>
                      <li>专业在线设计</li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <a href="">解决方案<span><UpOutlined /></span></a>
            {/* 滑入显示2 */}
            <div className={style.Mask}>
              <div className={style.masktu}>
                <div className={style.left}>
                  <h3>行业方案</h3>
                  <ul>
                    <li>
                      <div style={{ fontSize: '28px' }}>
                        <ShopOutlined />
                      </div>
                      <div>
                        <b>
                          金融行业
                        </b>
                        <div style={{ color: '#999', fontSize: '16px' }}>
                          提升内容生产力，加强品牌建设
                        </div>
                      </div>
                    </li>
                    <li>
                      <div style={{ fontSize: '28px' }}>
                        <ShoppingOutlined />
                      </div>
                      <div>
                        <b>
                          零售行业
                        </b>
                        <div style={{ color: '#999', fontSize: '16px' }}>
                          提升内容生产力，加强品牌建设
                        </div>
                      </div>
                    </li>
                    <li>
                      <div style={{ fontSize: '28px' }}>
                        <GlobalOutlined />
                      </div>
                      <div>
                        <b>
                          科技行业
                        </b>
                        <div style={{ color: '#999', fontSize: '16px' }}>
                          提升内容生产力，加强品牌建设
                        </div>
                      </div>
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <div style={{ fontSize: '28px' }}>
                        <ShopOutlined />
                      </div>
                      <div>
                        <b>
                          汽车行业
                        </b>
                        <div style={{ color: '#999', fontSize: '16px' }}>
                          提升内容生产力，加强品牌建设
                        </div>
                      </div>
                    </li>
                    <li>
                      <div style={{ fontSize: '28px' }}>
                        <ShoppingOutlined />
                      </div>
                      <div>
                        <b>
                          服饰行业
                        </b>
                        <div style={{ color: '#999', fontSize: '16px' }}>
                          提升内容生产力，加强品牌建设
                        </div>
                      </div>
                    </li>
                    <li>
                      <div style={{ fontSize: '28px' }}>
                        <GlobalOutlined />
                      </div>
                      <div>
                        <b>
                          家电行业
                        </b>
                        <div style={{ color: '#999', fontSize: '16px' }}>
                          提升内容生产力，加强品牌建设
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
                <div className={style.right}>
                  <img src="https://cdn.dancf.com/fe-assets/20240330/c8faaa7581f6e097747b74d68cb812af.png" alt="" />
                </div>
              </div>
            </div>
          </li>
          <li>
            开放平台
          </li>
          <li>
            渠道合作
          </li>
          <li>
            了解搞定
          </li>
        </ul>
      </div>
      <button className={style.btn}>立即体验</button>
    </div>
  )
}

export default EnterpriseTop
